<template>
  <scroll-view 
    class="scroll-container" 
    scroll-y 
    :style="{ height: windowHeight + 'px' }"
  >
    <view class="city-explore-page">
      <view class="module swiper-module">
        <view class="module-title">泉州风光</view>
        <swiper 
          class="city-swiper" 
          autoplay 
          interval="3000" 
          circular 
          indicator-dots
        >
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image 
              class="swiper-img" 
              :src="item.url" 
              mode="widthFix"
              :alt="item.desc"
            ></image>
          </swiper-item>
        </swiper>
      </view>

      <view class="module intro-module">
        <view class="module-title">泉州介绍</view>
        <rich-text :nodes="cityIntro"></rich-text>
      </view>

      <view class="module progress-module">
        <view class="module-title">探索进度</view>
        <view class="progress-wrap">
          <progress 
            percent="60" 
            show-info 
            stroke-width="8"
            activeColor="#1677ff"
            backgroundColor="#e5e7eb"
          ></progress>
        </view>
      </view>

      <view class="module picker-module">
        <view class="module-title">选择城市</view>
        <view class="picker-content">
          <button 
            class="picker-btn" 
            @click="showCityPicker = true"
          >
            {{ selectedCity || '请选择省/市/区' }}
          </button>
          
          <picker 
            mode="multiSelector"
            :range="cityData"
            :value="selectedIndices"
            @change="onCityChange"
            @columnchange="onColumnChange"
            v-if="showCityPicker"
          ></picker>
        </view>
      </view>

      <view class="module video-module">
        <view class="module-title">泉州宣传视频</view>
        <video 
          class="city-video"
          :src="videoUrl"
          controls
          poster="/static/quanzhou/video-poster.jpg"
          :show-center-play-btn="true"
        ></video>
      </view>

      <view class="module music-module">
        <view class="module-title">泉州背景音乐</view>
        <view class="music-content">
          <image 
            class="music-poster" 
            :src="musicPoster" 
            mode="widthFix"
          ></image>
          <view class="music-info">
            <text class="music-name">泉州南音</text>
            <text class="music-artist">- 泉州传统乐团</text>
          </view>
          <button 
            class="music-play-btn" 
            type="primary" 
            @click="toggleMusicPlay"
          >
            {{ isMusicPlaying ? '暂停' : '播放' }}
          </button>
          <slider 
            class="music-slider" 
            v-model="musicCurrentTime" 
            :max="musicDuration"
            @change="onMusicSliderChange"
          ></slider>
          <view class="music-time">
            <text>{{ formatTime(musicCurrentTime) }}</text>
            <text>{{ formatTime(musicDuration) }}</text>
          </view>
        </view>
      </view>

      <view class="module preference-module">
        <view class="module-title">偏好设置</view>
        <view class="preference-item">
          <view class="item-label">出行方式</view>
          <radio-group v-model="travelMode" class="radio-group">
            <label class="radio-item">
              <radio value="bus" color="#1677ff" />
              <text>公交</text>
            </label>
            <label class="radio-item">
              <radio value="drive" color="#1677ff" />
              <text>自驾</text>
            </label>
            <label class="radio-item">
              <radio value="walk" color="#1677ff" />
              <text>步行</text>
            </label>
          </radio-group>
        </view>
       
		<view class="preference-item">
          <view class="item-label">显示推荐景点</view>
          <switch 
            v-model="showRecommend" 
            active-color="#1677ff"
          ></switch>
        </view>
        
        <view class="preference-item">
          <view class="item-label">探索半径 {{ radius }}km</view>
          <slider 
            v-model="radius" 
            min="1" 
            max="20" 
            step="1"
            active-color="#1677ff"
          ></slider>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {

      windowHeight: 0,
      
      swiperList: [
        { url: '/static/quanzhou/city1.jpg', desc: '泉州钟楼' },
        { url: '/static/quanzhou/city2.jpg', desc: '闽台缘博物馆' },
        { url: '/static/quanzhou/city3.jpg', desc: '泉州湾景色' },
        { url: '/static/quanzhou/city4.jpg', desc: '泉州开元寺' },
        { url: '/static/quanzhou/city5.jpg', desc: '清源山风光' }
      ],
      
      cityIntro: [
        {
          name: 'p',
          attrs: { style: 'margin: 10px 0; line-height: 1.6;' },
          children: [
            { type: 'text', text: '泉州，古称刺桐城，是福建省下辖的一个地级市，' },
            { 
              name: 'span', 
              attrs: { style: 'font-weight: bold; color: #1677ff;' },
              children: [{ type: 'text', text: '联合国教科文组织认定的海上丝绸之路起点' }]
            },
            { type: 'text', text: '，也是国务院首批公布的24个历史文化名城之一。' }
          ]
        },
        {
          name: 'p',
          attrs: { style: 'margin: 10px 0; line-height: 1.6;' },
          children: [
            { type: 'text', text: '泉州拥有丰富的历史文化遗产，包括开元寺、清净寺、洛阳桥等著名景点，' },
            { 
              name: 'span', 
              attrs: { style: 'color: #e53e3e;' },
              children: [{ type: 'text', text: '2021年"泉州：宋元中国的世界海洋商贸中心"被列入世界遗产名录' }]
            }
          ]
        }
      ],
      
      cityData: [
        ['福建省', '浙江省', '广东省'],
        ['泉州市', '厦门市', '福州市'],
        ['鲤城区', '丰泽区', '洛江区', '泉港区', '惠安县']
      ],
      selectedIndices: [0, 0, 0],
      selectedCity: '福建省 > 泉州市 > 鲤城区',
      showCityPicker: false,
      
      videoUrl: '/static/quanzhou/city-video.mp4',
    
      musicUrl: '/static/quanzhou/city-music.mp3', 
      musicPoster: '/static/quanzhou/music-poster.jpg', 
      isMusicPlaying: false,
      musicCurrentTime: 0, 
      musicDuration: 0, 
      innerAudioContext: null,

      travelMode: 'bus',
      showRecommend: true,
      radius: 10
    };
  },
  
  onLoad() {

    const sysInfo = uni.getSystemInfoSync();
    this.windowHeight = sysInfo.windowHeight;

    this.innerAudioContext = uni.createInnerAudioContext();
    this.innerAudioContext.src = this.musicUrl;
    this.innerAudioContext.onCanplay(() => {
      this.musicDuration = this.innerAudioContext.duration;
    });
    this.innerAudioContext.onTimeUpdate(() => {
      this.musicCurrentTime = this.innerAudioContext.currentTime;
    });
    this.innerAudioContext.onEnded(() => {
      this.isMusicPlaying = false;
      this.musicCurrentTime = 0;
    });
  },
  
  onUnload() {

    if (this.innerAudioContext) {
      this.innerAudioContext.stop();
      this.innerAudioContext.destroy();
    }
  },
  
  methods: {

    onCityChange(e) {
      const indices = e.detail.value;
      this.selectedIndices = indices;
      this.selectedCity = `${this.cityData[0][indices[0]]} > ${this.cityData[1][indices[1]]} > ${this.cityData[2][indices[2]]}`;
      this.showCityPicker = false;
    },
	
    onColumnChange(e) {
      const { column, value } = e.detail;
      
      if (column === 0) {

      }

      if (column === 1) {

      }
    },

    toggleMusicPlay() {
      if (this.isMusicPlaying) {
        this.innerAudioContext.pause();
      } else {
        this.innerAudioContext.play();
      }
      this.isMusicPlaying = !this.isMusicPlaying;
    },

    onMusicSliderChange(e) {
      const value = e.detail.value;
      this.innerAudioContext.seek(value);
    },
    
    formatTime(second) {
      const m = Math.floor(second / 60);
      const s = Math.floor(second % 60);
      return `${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`;
    }
  }
};
</script>

<style scoped>
.scroll-container {
  width: 100%;
  background-color: #f9fafb;
}

.city-explore-page {
  padding: 16px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.module-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}

.swiper-module {
  padding-bottom: 12px;
}

.city-swiper {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
}

.swiper-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-wrap {
  padding: 10px 0;
}

.picker-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #f3f4f6;
  color: #4b5563;
  border-radius: 8px;
  font-size: 16px;
}

.city-video {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.music-module {
  padding-top: 12px;
}

.music-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.music-poster {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.music-info {
  text-align: center;
  margin-bottom: 12px;
}

.music-name {
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

.music-artist {
  font-size: 14px;
  color: #6b7280;
}

.music-play-btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.music-slider {
  width: 100%;
  margin-bottom: 8px;
}

.music-time {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: #6b7280;
}

.preference-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.preference-item:last-child {
  border-bottom: none;
}

.item-label {
  width: 120px;
  color: #4b5563;
  font-size: 15px;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #4b5563;
}
</style>